<template>
	<view>
		<view class="cashCoupon">
			<view class="my__coupon">
				<view v-for="(item, index) of coupon" :key="index" :class="['securities', backtype ? 'quan_used' : ''] ">
					<view class="coupon kfbt" @tap="handleDetail(item)">
						<view class="coupon_logo box">
							<image class="img_nav" :src="item.image_url"></image>
						</view>
						<view class="coupon__r">
							<view class="coupon__content">
								<view class="coupon__price" v-if="item.coupon_type == 'CASH'">
									<template v-if="item.plantype == 'D'">
										￥
										<text>{{item.price}}</text>
										<view class="orprice">原价：{{item.amount}}元</view>
									</template>
									<template v-else>
										￥
										<text>{{item.amount}}</text>
									</template>
								</view>
								<view class="coupon__discount" v-else-if="item.coupon_type == 'DISCOUNT'">
									<text>{{item.rebate}}</text>折
								</view>
								<view class="mydesc flex">
									<view class="coupon__tit">{{item.act_name || ''}}</view>
									<view class="coupon__sub">{{item.explain != null ? item.explain : '1'}}</view>
								</view>
							</view>
							<view class="coupon_term" v-if="item.time_limit_type == 'custom'">{{item.time_show}}</view>
							<view class="coupon_term" v-else>有效期：{{item.startdate}} 至 {{item.enddate}}</view>
						</view>
						<view class="coupon_abs">
							<button class="kfbt mybtn coupon_btn" v-if="curType==='V'">
								<view class="txt">去使用</view>
							</button>
							<button class="kfbt mybtn coupon_btn" v-if="curType==='U'">
								<view class="txt">已使用</view>
							</button>
							<button class="kfbt mybtn coupon_btn" v-if="curType==='O'">
								<view class="txt">已过期</view>
							</button>
						</view>
					</view>
					<view class="coupon_bottom" v-if="backtype">
						<view :class="['coupon_nav', dat_develop == item.coupon_id ? 'active' : '']" @tap="handleDetail(item)">
							<view class="con box box-align-start">
								<view class="txt">券使用后，有异常请点击此处</view>
								<view :class="['mine_arrow', dat_develop==item.coupon_id ? 'active' : '']"></view>
							</view>
							<view class="code">
								<block v-if="couponDetail.band_status !== ''">
									<template v-if="couponDetail.coupon_num">
										<view class='code_img'>
											<image bindtap='scaleBarcode' :src="couponDetail.barcodeurl" mode='widthFix' />
										</view>
										<view class='use_notice'>
											{{couponDetail.coupon_num}}
											<text @click.stop="copyTBL(couponDetail.coupon_num)">复制券码</text>
										</view>
									</template>
									<view class="fun">
										<view class="bot box box-align-center">
											<view class="con" @click.stop="handleproblem">无法用券</view>
											<view class="flex box box-align-center box-pack-center">
												<view class="sign box box-align-center box-pack-center" @click.stop="handleCancelsign(couponDetail.coupon_id, couponDetail.create_comp_id, couponDetail.coupon_num)"
												 v-if="curType==='U'">
													<image src="/static/images/icon_xing.png"></image>
													<view class="sign_txt">取消标记</view>
												</view>
											</view>
											<view class="rules" @click.stop="handlerules(couponDetail.act_rule)">查看规则</view>
											<view class="nav_arrow" @click.stop="handlerules(couponDetail.act_rule)"></view>
										</view>
									</view>
								</block>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<alert :title="unableTitle"
					 :msg="couponDetail.text1"
					 :showBtn="true" 
					 :cancelText="cancelText" 
					 :confirmText="confirmText" 
					 :loading='loading'
					 :type='type'
					 ref="unableAlert" 
					 @handleExchange="handleExchange"
		></alert>
		<alert :title="usedTitle"
					 :msg="couponDetail.act_rule"
					 :richCon="true"
					 ref="usedAlert"
		></alert>
	</view>

</template>

<script>
	let app = getApp()
	import couponModel from '../../model/coupon';
	
	import Alert from '../iframe/alert'
	export default {
		props: [
			// 券详情
			'coupon',
			// 券使用状态
			'curType'
		],
		data() {
			return {
				dat_develop: -1,
				couponDetail: '',
				// 二维码图片地址
				barcodeurl: '',
				// 无法用券参数
				unableTitle: '无法用券',
				cancelText: '已解决',
				confirmText: '联系客服',
				type: 'contact',
				// 使用规则参数
				usedTitle: '使用规则'
			}
		},
		components: {
			Alert
		},
		computed: {
			// 是否需要显示券底部信息与券底色判断
			backtype() {
				return this.curType == 'U' || this.curType == 'O'
			}
		},
		onShow() {

		},
		methods: {
			handleDetail(e) {
				const actid = e.id // 活动方案id
				const couponid = e.coupon_id // 优惠券id
				if (!this.backtype) {
					uni.navigateTo({
						url: '/pages/coupon/couponDetail?actid=' + actid + '&couponid=' + couponid,
					})
					return false
				}
				if (this.dat_develop != couponid) {
					this.getDetail(actid, couponid);
				} else {
					this.dat_develop = -1
				}
				console.log(e.coupon_id)
			},
			getDetail(act_id, coupon_id) {
				let zdy = {
					act_id,
					coupon_id
				}
				this.$api.wxApi.couponDetail(zdy).then(res => {
					this.couponDetail = couponModel.Detail.parse(res.data)
					this.dat_develop = coupon_id
					console.log(this.couponDetail)					
				})
			},
			// 无法用券
			handleproblem() {
				console.log('无法用券')
				this.$refs.unableAlert.showAlert()
			},
			copyTBL: function(val) {
				let that = this;
				uni.setClipboardData({
					data: val,
					success: function(res) {
					}
				});
			},
			handlerules(){
				this.$refs.usedAlert.showAlert()
			},
			// 取消标记消费
			handleCancelsign: function (coupon_id, coupon_num) {
				let that = this;
				uni.showLoading({
					title: '取消标记中...',
				})
				this.$api.wxApi.cancelDestruct({coupon_num, coupon_id}).then(res=>{
					uni.hideLoading();
					if (res.code !== 200) {
						return false;
					}
					this.$emit('refresh')
				})
			},
		}
	}
</script>

<style lang="scss">
	@import "../../assets/styles/couponlist.scss";
	@import "../../assets/styles/coupon-bottom.scss";

	.quan_used {
		background: url(https://wq.senwellzy.cn/Public/Images/h5shop/couponlist_used.png) no-repeat;
		background-size: 100% 190rpx;
		.coupon_logo image {
			-webkit-filter: grayscale(100%);
			-moz-filter: grayscale(100%);
			-ms-filter: grayscale(100%);
			-o-filter: grayscale(100%);
			filter: grayscale(100%);
			filter: gray;
			opacity: .2;
		}
		.coupon__r {
			.coupon__content {
				.coupon__price {
					color: $coupon-used-color;
					text {
						color: $coupon-used-color;
					}
				}
				.coupon__discount {
					color: $coupon-used-color;
					text {
						color: $coupon-used-color;
					}
				}
				.coupon__tit {
					color: $coupon-used-color;
				}
				.coupon__sub {
					color: $coupon-used-color;
				}
			}
			.coupon_term {
				color: $coupon-used-color;
			}
		}
		.coupon_abs .mybtn.coupon_btn {
			background-color: $coupon-used-color;
		}
	}
	.my__coupon .coupon_bottom .mine_arrow {
		padding-right: 18rpx;
		position: relative;
		padding-top: 36rpx;

		&.active:after {
			transition: all 0.5s;
			transform: rotate(90deg);
		}

		&:after {
			content: '';
			position: absolute;
			top: 0rpx;
			right: 28rpx;
			width: 0;
			height: 0;
			border-top: 18rpx solid transparent;
			border-bottom: 18rpx solid transparent;
			border-left: 24rpx solid #E8E8E8;
			margin-right: -18rpx;
			transition: all 0.5s;
		}
	}
</style>
